<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <style type="text/css">
      #map {
        height: 700px;
        width: 1000px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
      type="text/javascript"
    ></script>
    <script type="text/javascript">
      // 获取初始化位置
      let map = L.map("map").setView(
        [29.44916482692468, 106.47399902343751],
        7
      );
      //   定义基础布局-------------------------
      let baseLayers = {
        高德地图: L.tileLayer(
          "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
          { subdomains: "1234" }
        ).addTo(map),
        ArcGIS卫星影像: L.tileLayer(
          "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png"
        ),
        高德卫星地图: L.tileLayer(
          "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
        ),
        白色底图: L.tileLayer(
          "http://10.87.211.254:8099/title/{z}/{x}/{y}.png"
        ),
      };
      //  配置布局
      L.tileLayer("", {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 18,
      }).addTo(map);
      // 底层控制---------------------------------------------
      let layerControl = L.control
        .layers(
          baseLayers,
          {},
          {
            position: "topright",
          }
        )
        .addTo(map);

      //   事件-------------------------------------------------
      map.on("click", function (e) {
        let latlng = e.latlng;
        let content = "你好" + `${latlng}`; //还可获取dom元素做内容
        //   弹框------------------------------------------
        let popup = L.popup({
          closeButton: true, //是否有关闭按钮
          closeOnClick: true, // 点击空白是否关闭
          className: "pop-style", //弹框样式类名
        })
          .setLatLng(latlng) // 弹框坐标
          .setContent(content) //弹框内容 可动态内容
          //   .setContent("你好xxx")
          .openOn(map);
        // 标记弹框-------------------------------------------------
        L.marker([29.44916482692468, 106.47399902343751])
          .addTo(map)
          .bindPopup(content + "标记");
      });
      L.marker([29.44916482692468, 106.47399902343751]).addTo(map);
    </script>
  </body>
</html>
